<template>
	<view class="content">
		<view class="main">

			<view style="color: orangered;font-size: 24rpx;margin: 4rpx 0 0 0;">{{hint}}</view>

			<view class="menu_name">*姓名</view>
			<view style="display: flex;align-items: center;">
				<input class="et_wb_num" placeholder="请输入姓名" maxlength="50" :value="name" @input="onInputName" />
			</view>

			<view class="menu_name">*性别</view>
			<radio-group style="margin: 16rpx 0 20rpx 0;display: flex;" @change="onRadioChange($event,99)">
				<label style="display: flex;align-items: center;">
					<radio style="transform:scale(0.8);" :checked="sex == '男'" value="男"></radio>
					男
				</label>
				<label style="display: flex;align-items: center;margin: 0 0 0 100rpx;">
					<radio style="transform:scale(0.8)" :checked="sex == '女'" value="女"></radio>
					女
				</label>
			</radio-group>

			<view class="menu_name">*手机号</view>
			<view style="display: flex;align-items: center;">
				<input class="et_wb_num" placeholder="请输入手机号" maxlength="30" :value="phone" @input="onInputPhone" />
			</view>

			<view class="menu_name">门头名称</view>
			<view style="display: flex;align-items: center;">
				<input class="et_wb_num" placeholder="请输入门头名称" maxlength="99" :value="address" @input="onInputAddress" />
			</view>

			<view class="menu_name">门头地址</view>
			<view style="display: flex;align-items: center;">
				<input class="et_wb_num" placeholder="请输入门头地址" maxlength="99" :value="storefrontName" @input="onInputStorefrontName" />
			</view>

			<view style="display: flex;margin: 24rpx 0 0 0;">
				<view style="color: #bbb;font-size: 26rpx;">当前站点：{{siteName}}</view>
				<view style="color: deepskyblue;font-size: 26rpx;margin: 0 0 0 12rpx;" @click="onRefreshSite">刷新</view>
			</view>

			<view class="btn_ok" @click="onAuthState">提交报名信息</view>
			<!-- <view class="btn_ok" @click="onOk">提交报名信息</view> -->

			<view style="color: #ccc;font-size: 22rpx;margin: 60rpx 0 0 0;text-align: center;">©致胜供应链提供技术支持</view>

		</view>

	</view>
</template>

<script>
	import { getUInfo, isZhuijia } from '@/util/util.js'
	import { chooseAndUploadImg, } from '@/util/uni_util.js'
	const jWeixin = require('../../util/ext/index_wxjssdk.js')

	export default {
		data() {
			return {
				hint: `温馨提示：报名需要关注『致胜供应链』公众号，用于抽奖、领奖、查询中奖记录等。`,

				name: '', // 运单号
				sex: '', // 性别
				phone: '', // 手机号
				storefrontName: '', // 门头名称
				address: '', // 门头地址
				siteId: '站点id',

				siteName: '--',
			}
		},

		onLoad(opts) {
			let that = this
			let ver = '2510180913'
			// uni.showToast({ icon: 'none', title: `当前版本：${ver}`, duration: 1000 })
			console.log(`当前版本：${ver}`);

			setTimeout(() => {
				that.siteId = opts.id
				if (!that.siteId) {
					that.siteId = '49'
				}
				console.log('onLoad.that.siteId = ', that.siteId);
			}, 500)

			// 判断关注状态是否过期
			if (!uni.getStorageSync('subscribe_expire') || !uni.getStorageSync('subscribe')) {
				// 没有关注信息,认为过期,设置缺省值
				uni.setStorageSync('subscribe', '0')
				uni.setStorageSync('subscribe_expire', 0)
			} else {
				if (uni.getStorageSync('subscribe_expire') < Date.now()) {
					// 过期时间 < 当前时间 , 说明已过期
					uni.setStorageSync('subscribe', '0')
					uni.setStorageSync('subscribe_expire', 0)
				}
			}
		},

		onHide() {
			// console.log('报名页面onHide执行了...');
			// 保存已填写的数据
			let enrollObj = {
				name: this.name,
				sex: this.sex,
				phone: this.phone,
				storefrontName: this.storefrontName,
				address: this.address,
				siteId: this.siteId,
			}
			uni.setStorageSync('enrollObj', JSON.stringify(enrollObj))
		},

		onReady() {
			// console.log('报名页面onReady执行了...');
			let that = this
			// 填充草稿数据
			let tmp = uni.getStorageSync('enrollObj')
			if (tmp) {
				let enrollObj = JSON.parse(tmp)
				if (enrollObj) {
					this.name = enrollObj.name
					this.sex = enrollObj.sex
					this.phone = enrollObj.phone
					this.storefrontName = enrollObj.storefrontName
					this.address = enrollObj.address
					this.siteId = enrollObj.siteId
				}
			}
			console.log('onReady.that.siteId = ', that.siteId);

			setTimeout(() => {
				that.getSiteById()
			}, 500)
		},

		methods: {

			// 点击:刷新站点
			onRefreshSite() {
				this.getSiteById()
			},
			// 微信授权登录
			onWxLogin() {
				let appid = 'wx710ec0311767dd6b'
				let redirect_uri = 'https://enroll.xman56.com' // http%3A%2F%2Fdevelopers.weixin.qq.com
				// redirect_uri = 'https%3A%2F%2Fenroll.xman56.com'
				redirect_uri = 'https%3A%2F%2Fenroll.xman56.com%2F%23%2Fpages%2Findex%2Fwx_auth'
				let wx_auth_url = `https://open.weixin.qq.com/connect/oauth2/authorize?
					appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
				location.href = wx_auth_url
			},
			// 单选框改变事件
			onRadioChange(event, index) {
				// console.log('event = ', event);
				this.sex = event.detail.value
			},
			// 监听:输入门头地址
			onInputStorefrontName(e) {
				this.storefrontName = e.detail.value
			},
			// 监听:输入门头地址
			onInputAddress(e) {
				this.address = e.detail.value
			},
			// 监听:输入手机号
			onInputPhone(e) {
				this.phone = e.detail.value
			},
			// 监听:输入姓名
			onInputName(e) {
				this.name = e.detail.value
			},

			// 验证关注状态
			onAuthState() {
				if (uni.getStorageSync('subscribe') != '1') {
					this.onWxLogin()
					return
				}
				this.onOk()
			},

			// 提交上报
			onOk() {
				if (!this.name) {
					uni.showToast({ icon: 'none', title: '请输入姓名' })
					return
				}
				if (!this.sex) {
					uni.showToast({ icon: 'none', title: '请选择性别' })
					return
				}
				if (!this.phone) {
					uni.showToast({ icon: 'none', title: '请输入手机号' })
					return
				}

				uni.showModal({
					title: '提示',
					content: '确认上报以上信息？',
					success: (res) => {
						res.confirm && this.postData()
					}
				})
			},

			// 接口:上报数据
			async postData() {
				let that = this
				let token = getUInfo().token
				uni.showLoading({ title: '上报中', mask: true, })
				let name = this.name
				let sex = this.sex
				let phone = this.phone
				let storefrontName = this.storefrontName
				let address = this.address
				let siteId = this.siteId

				let openid = uni.getStorageSync('openid')

				let res = await that.$postEnroll({ name, sex, phone, storefrontName, address, siteId, openid })
				console.log('$postEnroll.res = ', res);
				if (res.code == 1) {
					// 报名成功,重置页面数据,清除保存的报名信息草稿
					that.resetData()
					uni.showModal({ title: '提示', content: res.msg, })
				} else {
					uni.showToast({ title: res.msg, icon: 'none' })
				}
			},

			// 重置数据
			resetData() {
				this.name = ''
				this.sex = ''
				this.phone = ''
				this.storefrontName = ''
				this.address = ''
				try {
					uni.removeStorageSync('enrollObj')
				} catch (e) {}
			},

			// 接口:获取站点名称
			async getSiteById() {
				let that = this
				let token = getUInfo().token
				// uni.showLoading({ title: '加载中', mask: true, })

				let siteId = this.siteId

				let res = await that.$getSiteById({ siteId })
				console.log('$getSiteById.res = ', res);
				if (res.code == 1) {
					this.siteName = res.data.site_name
				} else {
					uni.showToast({ title: res.msg, icon: 'none' })
				}
			},

		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		position: relative;
		min-height: 100vh;
		background-color: #6974DD;
		font-size: 30rpx;
	}

	.main {
		display: flex;
		flex-direction: column;
		margin: 24rpx;
		background-color: white;
		border-radius: 24rpx;
		padding: 24rpx;
	}

	.menu_name {
		margin: 36rpx 0 0 0;
		display: flex;
		align-items: center;
		font-weight: bold;
	}

	.sub_menu_name {
		margin: 12rpx 0 0 0;
	}

	.order_div {
		padding: 24rpx;
		background: white;
		border-radius: 12rpx;
		border: solid 1rpx #ccc;
		margin: 12rpx 0 0 0;
	}

	.et_wb_num {
		flex-grow: 1;
		height: 76rpx;
		line-height: 76rpx;
		font-size: 30rpx;
		border-radius: 12rpx;
		border: solid 1rpx #ccc;
		margin: 18rpx 0 0 0;
		padding: 0 24rpx 0 24rpx;
	}

	.btn_wb {
		width: 26%;
		height: 76rpx;
		line-height: 76rpx;
		color: white;
		text-align: center;
		font-size: 28rpx;
		margin: 24rpx 0 0 0;
		border-radius: 12rpx;
		background: #6974DD;
		margin: 24rpx 0 0 12rpx;
	}

	.et_desc {
		width: calc(100% - 48rpx);
		height: 100rpx;
		border-radius: 12rpx;
		border: solid 1rpx #ccc;
		margin: 24rpx 0 0 0;
		padding: 24rpx;
	}

	.item_sel_img {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		margin: 12rpx 0 12rpx 0;
	}

	.sel_img_div {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* 选择的照片 */
	.sel_img {
		width: 132rpx;
		height: 132rpx;
		margin: 16rpx 0 0 16rpx;
		border: solid 1rpx #999;
		border-radius: 12rpx;
	}

	.sel_img_del {
		padding: 6rpx;
		color: orangered;
		margin: 0 0 0 16rpx;
	}

	.btn_sel_media {
		width: 300rpx;
		height: 66rpx;
		line-height: 66rpx;
		font-size: 28rpx;
	}

	.btn_ok {
		height: 88rpx;
		line-height: 88rpx;
		color: white;
		text-align: center;
		font-size: 30rpx;
		margin: 48rpx 0 0 0;
		border-radius: 888rpx;
		background: #6974DD;
	}

	.btn_ok_2 {
		height: 88rpx;
		line-height: 88rpx;
		color: white;
		text-align: center;
		font-size: 30rpx;
		margin: 24rpx 0 0 0;
		border-radius: 888rpx;
		background: #6974DD;
	}
</style>